<!--
 * @Author: your name
 * @Date: 2022-02-08 18:20:02
 * @LastEditTime: 2022-05-23 10:35:54
 * @LastEditors: hq
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \live_sys\src\views\main\home.vue
-->
<template>
  <div>
    <div class="card_con mb15">
      <el-row class="mb10">
        <el-col :span="8" class="pr40">
          <div class="fz14 mb15">商品名</div>
          <el-input v-model="storeName" placeholder="请输入商品名"></el-input>
        </el-col>
        <el-col :span="8" class="pr40">
          <div class="fz14 mb15">时间</div>
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="8">
          <div class="fz14 mb15">&nbsp;</div>
          <el-button type="primary">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="card_con">
      <div class="row mb20">
        <div class="l" @click="handleAdd">
          <i class="el-icon-circle-plus-outline"></i>添加
        </div>
        <div class="l"><i class="el-icon-circle-check"></i>启用</div>
        <div class="l"><i class="el-icon-remove-outline"></i>禁用</div>
      </div>
      <el-table
        border
        :data="tableData"
        :header-cell-style="{
          'text-align': 'center',
        }"
        :cell-style="{ 'text-align': 'center' }"
        tooltip-effect="light"
        stripe
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="selection" min-width="5%"> </el-table-column>
        <el-table-column prop="id" label="id" min-width="5%"> </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="tel"
          label="分类名"
          min-width="20%"
        >
        </el-table-column>
        <el-table-column label="图标" min-width="15%">
          <template slot-scope="scope">
            <div class="slt">
              <el-popover placement="right" width="200" trigger="hover">
                <img class="tbImg1" :src="scope.row.logo" alt="" />
                <img
                  class="tbImg"
                  slot="reference"
                  :src="scope.row.logo"
                  alt=""
                />
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="leixing" label="排序" min-width="10%">
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="10%">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="20%">
        </el-table-column>
        <el-table-column label="操作" min-width="40%">
          <template slot-scope="scope">
            <div class="caozuo">
              <div
                class="handleEdit hand_cs"
                @click="handleEdit(scope.$index, scope.row)"
              >
                修改
              </div>
              <div
                class="handleDelete hand_cs"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </div>
            </div>
            <!-- <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >

            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <Pagination
          :page="page"
          @onCurrentChange="handleCurrentChange"
          @onSizeChange="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :title="addEditTitle"
      :visible.sync="dialog"
      width="800px"
    >
      <Dialog v-if="dialog" @handleClose="handleClose"></Dialog>
    </el-dialog>
  </div>
</template>

<script>
import Dialog from "./change_dialog.vue";
import Pagination from "@/components/Pagination.vue";
export default {
  components: { Pagination, Dialog },
  data() {
    return {
      page: {
        total: 0,
        pageNum: 1, // 当前页数
        pageSize: 10, // 每页的条数
      },
      tableData: [
        {
          id: "1",
          hf_id: "123243",
          tel: "18582669937成都市武侯区18582669937成都市武侯区",
          location: "成都市武侯区成都市武侯区成都市武侯区",
          logo: require("@/assets/1.png"),
          leixing: "入驻",
          status: "启用",
          create_time: "2022-5-19",
        },
        {
          id: "2",
          hf_id: "123243",
          tel: "18582669937",
          location: "成都市武侯区",
          logo: require("@/assets/1.png"),
          leixing: "入驻",
          status: "启用",
          create_time: "2022-5-19",
        },
        {
          id: "3",
          hf_id: "123243",
          tel: "18582669937",
          location: "成都市武侯区",
          logo: require("@/assets/1.png"),
          leixing: "入驻",
          status: "启用",
          create_time: "2022-5-19",
        },
        {
          id: "4",
          hf_id: "123243",
          tel: "18582669937",
          location: "成都市武侯区",
          logo: require("@/assets/1.png"),
          leixing: "入驻",
          status: "启用",
          create_time: "2022-5-19",
        },
        {
          id: "5",
          hf_id: "123243",
          tel: "18582669937",
          location: "成都市武侯区",
          logo: require("@/assets/1.png"),
          leixing: "入驻",
          status: "启用",
          create_time: "2022-5-19",
        },
        {
          id: "6",
          hf_id: "123243",
          tel: "18582669937",
          location: "成都市武侯区",
          logo: require("@/assets/1.png"),
          leixing: "入驻",
          status: "启用",
          create_time: "2022-5-19",
        },
      ],
      addEditTitle: "",
      dialog: false,
    };
  },
  mounted() {},
  methods: {
    handlSearch() {},
    handleSelectionChange(val) {},
    //添加
    handleAdd() {
      this.dialog = true;
      this.addEditTitle = "添加";
    },
    //编辑
    handleEdit() {
      this.dialog = true;
      this.addEditTitle = "编辑";
    },
    //关闭弹出
    handleClose() {
      this.dialog = false;
    },

    handleReturn() {
      this.$confirm("是否确认驳回?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            showClose: true,
            type: "success",
            message: "操作成功!",
            duration: 2000,
          });
        })
        .catch(() => {});
    },
    handleDelete() {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            showClose: true,
            type: "success",
            message: "操作成功!",
            duration: 2000,
          });
        })
        .catch(() => {});
    },
    handleAvatarSuccess(res, file) {
      this.form.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 每页 ${val} 条
    handleSizeChange(val) {
      //   this.$emit("onSizeChange", val);
    },
    // 当前页: ${val}
    handleCurrentChange(val) {
      //   this.$emit("onCurrentChange", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  border-radius: 2px;
  border: 1px solid #ccc;
  width: 240px;
  .l {
    width: 80px;
    height: 36px;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;

    i {
      margin-right: 6px;
      font-size: 18px;
    }
    &:hover {
      cursor: pointer;
    }
  }
  .l:nth-child(3) {
    border-right: 0;
  }
}

.tbImg1 {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.slt {
  text-align: start;
  // color: #5c90d2;
  div {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    // font-weight: 600;
  }
}
.el-button:active {
}
.cz {
  margin: 0 auto;
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 14px;

  div:hover {
    // opacity: 0.8;
  }
}
/deep/.el-table__cell {
  padding: 6px 0;
}
/deep/.el-dialog__body {
  padding: 0 10px 10px 10px;
}
.dialog1 {
  /deep/.el-dialog__body {
    height: 400px;
  }
}
.color1 {
  font-weight: bold;
}
.color2 {
  font-weight: bold;
}
.caozuo {
  display: flex;
  justify-content: center;
  .handleDelete {
    margin-left: 20px;
  }
}
</style>
